<template>
  <div>
    <Child :nameList="nameList">
      <template #student>
        <h2>学生列表</h2>
      </template>

      <template #nameItem="{ person }">
        <li :style="{ background: person.age > 20 ? 'skyblue' : '' }">
          {{person.name}}--{{person.age}}
        </li>
      </template>
    </Child>
  </div>
</template>

<script>
import Child from "@/components/Child";
export default {
  name: "App",
  components: { Child },
  data() {
    return {
      nameList: [
        { id: "001", name: "张三", age: 20 },
        { id: "002", name: "李四", age: 10 },
        { id: "003", name: "王五", age: 22 },
        { id: "004", name: "赵六", age: 14 },
        { id: "005", name: "郑七", age: 50 },
        { id: "006", name: "老八", age: 41 },
        { id: "007", name: "小九", age: 12 },
      ],
    };
  },
};
</script>

<style>
.List {
  display: flex;
  justify-content: space-around;
}
</style>
